;
(function (root) {
    function listControl(data, wrap) {
        var list = document.createElement('div');
        dl = document.createElement('dl'),
            dt = document.createElement('dt'),
            close = document.createElement('div'),
            musicList = [];
        dt.innerHTML = "播放列表";
        list.className = "list";
        close.className = 'close';
        close.innerHTML = "关闭";
        dl.appendChild(dt);
        data.forEach((item, index) => {
            var dd = document.createElement('dd');
            dd.innerHTML=item.name;
            dd.addEventListener('touchend', function () {
                changeSelect(index);
            });
            dl.appendChild(dd);
            musicList.push(dd);
        });
        list.appendChild(dl);
        list.appendChild(close);
        wrap.appendChild(list)

        changeSelect(0);
        var disY = list.offsetHeight;
        list.style.transform='translateY('+disY+'px)';
        list.style.opacity=0.2;
        close.addEventListener('touchend',slideDown);

        function slideUp(){
            list.style.opacity=1;
            list.style.transform='translateY(0)';
        }
        function slideDown(){
            list.style.transform='translateY('+disY+'px)';
            list.style.opacity=0.2;
        }
        function changeSelect(index){
            for(var i=0;i<musicList.length;i++){
                musicList[i].className='';
            }
            musicList[index].className='active';

        }
        return {
            list,
            slideUp,
            slideDown,
            changeSelect,
            musicList,
        }
    }
    root.listTool = listControl;
})(window.player || (window.player = {}))